<template>
    <!-- <teleport to="#message"> -->
      <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
        :class="classObject" v-if="isVisible">
        <span>{{message}}</span>
        <button type="button" class="close" aria-label="Close" @click.prevent="hide">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <!-- </teleport> -->
  </template>
  
  <script lang="ts">
  import { defineComponent, PropType, ref } from 'vue'
  import useDOMCreate from '../hooks/useDOMCreate'
  export type MessageType = 'success' | 'error' | 'default'
  export default defineComponent({
    props: {
      message: String,
      type: {
        type: String as PropType<MessageType>,
        default: 'default'
      }
    },
    emits: ['close-message'], // 这个事件在createMessage.ts中被使用,当点击关闭按钮时会触发onCloseMessage回调来卸载组件
    setup(props, context) {
      useDOMCreate('message')
      const isVisible = ref(true)
      const classObject = {
        'alert-success': props.type === 'success',
        'alert-danger': props.type === 'error',
        'alert-primary': props.type === 'default'
      }
      const hide = () => {
        isVisible.value = false
        context.emit('close-message', true)
      }
   
      return {
        classObject,
        isVisible,
        hide,
      
        
      }
    }
  })
  
  </script>